  <template>
    <div class="footer">
        <span class="todo-count">共{{ lastLength }}条数据待完成</span>
        <ul class="filters">
            <li>
                <a href="#" :class="{selected:status == '所有'}" @click="emit('updateStatus','所有')">所有</a>
            </li>
            <li>
                <a href="#"  @click="emit('updateStatus','待办')" :class="{selected:status == '待办'}">待办</a>
            </li>
            <li>
                <a href="#" @click="emit('updateStatus','完成')" :class="{selected:status == '完成'}">完成</a>
            </li>
        </ul>
    </div>
  </template>
  
  <script setup>
  const props = defineProps(["lastLength","status"]);
  const emit = defineEmits(["updateStatus"])
  </script>
  
  <style scoped>
  .footer { 
    text-align: center;
    padding: 10px 20px;
    font-size: 15px;
  }
  .todo-count { 
    float: left;
    position: relative;
    top: 10px;
    font-size: 20px;
  }
  .filters { 
    list-style: none;
    float: right;
  }
  .filters li { 
    display: inline;
  }
  .filters li a { 
    margin-left: 20px;
    text-decoration: none;
    display: inline-block;
    border: 1px solid black;
    width: 70px;
    height: 25px;
    text-align: center;
    color: black;
    font-weight: bold;
}
.filters li a:hover { 
    color: pink;
}
.filters li a.selected { 
    border-color: brown;
    background-color: pink;
    color: rgb(255, 1, 196);
  }
  </style>